<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image CAPTCHA</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        #captcha-container {
            text-align: center;
            margin-bottom: 20px;
        }

        #captcha-canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div id="captcha-container">
        <!-- <input type=""> -->
        <canvas onclick="generateCaptcha()" id="captcha-canvas" width="200" height="50"></canvas>
    </div>
    <script>
        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        function generateCaptcha() {
            const canvas = document.getElementById('captcha-canvas');
            const ctx = canvas.getContext('2d');

            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Define characters and captcha length
            const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            const captchaLength = 4;
            let captcha = '';

            // Generate random captcha text and colors
            for (let i = 0; i < captchaLength; i++) {
                const randomIndex = Math.floor(Math.random() * characters.length);
                captcha += characters[randomIndex];
            }

            // Draw captcha text on canvas with random colors
            ctx.font = '24px Arial';
            ctx.textBaseline = 'middle';

            for (let i = 0; i < captcha.length; i++) {
                ctx.save();

                // Random position for each character (simple centering)
                const x = (i + 1) * (canvas.width / (captcha.length + 1)) - 12; // Adjust -12 to center better
                const y = canvas.height / 2;

                // Random rotation
                const angle = Math.random() * 15 - 7.5;
                ctx.translate(x, y);
                ctx.rotate(angle * Math.PI / 180);

                // Random color
                ctx.fillStyle = getRandomColor();

                // Draw the character
                ctx.fillText(captcha[i], 0, 0);

                ctx.restore();
            }
        }

        // Generate initial CAPTCHA when the page loads
        window.onload = generateCaptcha;
    </script>
</body>
</html>